<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>内置指令</h1>
    <h2>条件渲染指令</h2>
    <p v-if="isShow">
      <span>星星</span>
      <span>星星</span>
    </p>
    <p v-else>
      <span>我是备胎</span>
      <span>我是备胎</span>
    </p>
    <p>人生不相见，动如参与商。</p>
    <hr>
    <p v-if="gender == 'nan'">
      <span>教练，我要打篮球</span>
    </p>
    <p v-else-if="gender == 'nv'">
      <span>帮我清空购物车</span>
    </p>
    <template v-else>
      <p>
        <span>帮我买回泰国的票</span>
      </p>
      <p>
        <span>帮我买回泰国的票</span>
      </p>
      <p>
        <span>帮我买回泰国的票</span>
      </p>
      <p>
        <span>帮我买回泰国的票</span>
      </p>
    </template>
    <input type="text" v-model="gender">
    <hr>
    <p>vue中的key属性</p>
    <template v-if="type == 'email'">
      <label>邮箱登录：</label>
      <input type="text" placeholder="请输入邮箱" key="email">
    </template>
    <template v-else>
      <label>手机登录：</label>
      <input type="text" placeholder="请输入手机号" key="phone">
    </template>
    <button @click="changeLoginType">toggle</button>
    <hr>
    <p v-show="isShow">现身</p>
    <p v-show="!isShow">隐身</p>
    <p v-if="!isShow">隐身</p>
    <hr>
    <span v-for="huluwa in huluwas">{{huluwa}}</span>
    <div>
      <img v-for="img in imgs" 
        :src="'../img/'+img+'.png'" width="60%"><br>
    </div>
    <p v-for="phone in cartList" :class="phone.name">
      {{phone.name}}
      {{phone.price}}
    </p>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        isShow: true,
        gender: 'nan',
        type: 'email',
        huluwas: [
          '大娃',
          '二娃',
          '三娃',
          '四娃',
          '五娃',
          '六娃',
          '七娃'
        ],
        imgs: [
          'pic1',
          'pic2',
          'pic3',
          'pic4'
        ],
        cartList: [
          {
            name: 'iphone',
            price: '9999'
          },{
            name: 'mi 10',
            price: '7777'
          }
        ]
      },
      methods: {
        changeLoginType() {
          this.type == 'email' ? this.type = 'phone' : this.type = 'email'
        }
      },
    })
  </script>
</body>
</html>